<template>
  <el-form-item label="多图列表">
    <div class="swiper-editor">
      <div class="swiper-list">
        <draggable v-model="editorForm.images.value" :animation="150" item-key="id" handle=".swiper-item"
          class="swiper-draggable-list">
          <template #item="{ element, index }">
            <div class="swiper-item" @mouseenter="activeIndex = index" @mouseleave="activeIndex = null">
              <img :src="element.url" />
              <div class="format-box-mask" v-show="activeIndex === index">
                <el-button-group>
                  <el-button size="small" :icon="Delete" @click="handleDelete(index)" />
                  <el-button size="small" :icon="Edit" @click="handleEdit(index)" />
                </el-button-group>
              </div>
            </div>
          </template>
        </draggable>
        <div class="swiper-item" @click="handleAdd">
          <el-icon :size="24">
            <Plus />
          </el-icon>
        </div>
      </div>
    </div>
    <FilesUpload v-model:showDialog="showBackImageUpload" :limit="limit" @getFileList="handleGetCoverImg" />
  </el-form-item>
</template>

<script setup>
import { ref, inject } from 'vue'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'

const { editorForm, backUpdate } = inject('commonForm')
const activeIndex = ref(null)
// 添加图片
const limit = ref(6)
const optionIndex = ref(0)
const handleAdd = () => {
  if (!editorForm.value.images.value || editorForm.value.images.value.length === 0) {
    editorForm.value.images.value = []
  }
  optionIndex.value = editorForm.value.images.value.length
  limit.value = 6
  showBackImageUpload.value = true
}
const handleEdit = index => {
  limit.value = 1
  optionIndex.value = index
  showBackImageUpload.value = true
}
const handleDelete = index => {
  editorForm.value.images.value.splice(index, 1)
}

// 添加图片
const showBackImageUpload = ref(false)
const handleGetCoverImg = imgList => {
  // 在指定位置替换解构后的数组元素
  editorForm.value.images.value.splice(optionIndex.value, 1, ...imgList)
  backUpdate()
}
</script>

<style lang="scss" scoped>
.swiper-editor {
  width: 100%;

  .swiper-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;

    .swiper-draggable-list {
      display: contents; // 这会保持网格布局
    }

    .swiper-item {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top: 10px;
      width: 100%;
      height: 70px;
      border: 1px solid #f2f2f2;
      overflow: hidden;
      cursor: pointer;

      img {
        width: 100%;
        height: 70px;
        object-fit: contain;
      }

      .format-box-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba($color: #000000, $alpha: 0.2);
      }

      &:hover {
        border: 1px solid $mainColor;
      }
    }
  }

  .form-img {
    height: 100px;
    width: 150px;
    border: 1px dashed $borderColor;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    .has-img {
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 100%;
        max-height: 100%;
      }

      span {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        background-color: $failColor;
        height: 20px;
        width: 20px;
        font-size: 18px;
        color: #fff;
      }

      &:hover {
        span {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

.custom-next {
  width: 100%;
  padding-left: 80px;
}

.custom-after {
  display: inline-block;
  margin-left: 5px;
}

.el-radio-group .el-radio {
  margin-right: 8px;
}

::v-deep .font-checkbox.el-checkbox .el-checkbox__input {
  display: none;
}
</style>